/* ==========================================================================
   GLOBAL CONTROL PANEL LAYOUT ELEMENTS
   ========================================================================== */

body {
    @apply w-full bg-gray-300 relative dark:bg-dark-800;
}

#statamic {
    min-height: 100vh;
}


#main {
    @apply flex;
    padding-bottom: 72px;
    position: relative;
    z-index: 1;
}

#main .workspace {
    transition: padding .3s;
    @apply w-full;
}

a {
    text-decoration: none;
    cursor: pointer;
}

.break-all {
    overflow: hidden;
    text-overflow: ellipsis;
}

@screen md {

    #main {
        padding-top: 52px;
    }

    #main .workspace {
        padding-left: 14rem ; [dir="rtl"] & { padding-right: 14rem ; padding-left: 0 ; }
    }

    #main.nav-closed {
        .nav-main {
            left: -14rem ; [dir="rtl"] & { left: auto ; right: -14rem ; }
        }

        .workspace {
            padding-left: 0 ; [dir="rtl"] & { padding-right: 0 ; padding-left: 0 ; }
        }
    }
}


/* Page Wrapper
  ========================================================================== */
.page-wrapper {
    @apply p-3 pt-6;
}

@screen md {
    .page-wrapper {
        @apply px-8 max-w-xl mx-auto;
    }
}

.fieldtype-hidden {
    display: none;
}

/* Draggable Mirrors
  ========================================================================== */

/* Mirrors that have been appended to the body should appear on top of everything. (Portals are 4) */
body > .draggable-mirror {
    z-index: 5;
}
